<template>
  <div class="bar-chart-10 chart" ref="barChart10"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart10 = ref(null);
const echarts = inject("$echarts");

let dataX = ["娄葑街道", "斜塘街道", "唯亭街道", "胜浦街道", "金鸡湖街道"];
let zfry = [80, 40, 110, 60, 10];
let fzry = [60, 40, 110, 60, 10];
const option = {
  backgroundColor: "#000",
  tooltip: {
    trigger: "axis",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "10%",
    right: "5%",
    left: "10%",
    bottom: "13%",
  },
  legend: {
    data: ["隐患数", "处置数"],
    top: "0%",
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: "11",
    },
  },
  xAxis: [
    {
      type: "category",
      data: dataX,
      axisLine: {
        lineStyle: {
          color: "rgba(66, 192, 255, .3)",
        },
      },
      axisLabel: {
        // interval: 0,
        margin: 10,
        color: "#FFF",
        textStyle: {
          fontSize: 10,
        },
      },
      axisTick: {
        // 刻度
        show: false,
      },
    },
  ],
  yAxis: [
    {
      name: "个",
      nameTextStyle: {
        color: "#ffffff",
        fontSize: 12,
        fontFamily: "Source Han Sans CN",
        fontWeight: 400,
      },
      axisLabel: {
        padding: [3, 0, 0, 0],
        formatter: "{value}",
        color: "#FFF",
        textStyle: {
          fontSize: 12,
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(66, 192, 255, .3)",
        },
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(66, 192, 255,0.1)",
          type: "dashed",
        },
        show: true,
      },
    },
  ],
  series: [
    {
      name: "隐患数",
      type: "bar",
      data: zfry,
      barWidth: 10,
      itemStyle: {
        normal: {
          color: "#58CFFA",
        },
      },
    },
    {
      name: "处置数",
      type: "bar",
      data: fzry,
      barWidth: 10,
      itemStyle: {
        normal: {
          color: "#FFEC86",
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart10.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
